<template>
    <div class="box1">
         <audio id="audio" src="../assets/名决 - 时间的过客.mp3" controls  loop></audio>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    </div>
</template>

<script>
export default {
    name: ''
}
</script>

<style scoped>
/* body {
            width: 100%;
            background: url("img/xf.png") no-repeat;
            background-size: 100% 100%;
            perspective: 1000px;
        } */
        .box1{
            perspective:1000px;
        }
        #audio {
            position: relative;
            left: 0px;
            top: 360px;
            background-color: rgb(141, 14, 226);
            border-radius: 30px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            position: relative;
            border: 1px solid black;
            transform: rotateX(-30deg);
            transform-style: preserve-3d;
            animation: move 20s linear infinite;
        }
        
        li {
            list-style: none;
        }
        
        .box li {
            width: 100%;
            height: 100%;
            opacity: 0.8;
            position: absolute;
        }
        
        .box li:nth-of-type(1) {
            transform: translateZ(150px);
            background: url("../assets/1.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(2) {
            transform: translateZ(-150px);
            background: url("../assets/2.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(3) {
            transform: rotateY(60deg) translateZ(-150px);
            background: url("../assets/3.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(4) {
            transform: rotateY(-60deg) translateZ(-150px);
            background: url("../assets/4.jpg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(5) {
            transform: rotateY(-60deg) translateZ(150px);
            background: url("../assets/5.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(6) {
            transform: rotateY(60deg) translateZ(150px);
            background: url("../assets/6.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(7) {
            transform: rotateX(-45deg) translateZ(150px);
            background: url("../assets/6.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(8) {
            transform: rotateX(45deg) translateZ(150px);
            background: url("../assets/5.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(9) {
            transform: rotateX(90deg) translateZ(150px);
            background: url("../assets/4.jpg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(10) {
            transform: rotateX(90deg) translateZ(-150px);
            background: url("../assets/3.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(11) {
            transform: rotateX(-45deg) translateZ(-150px);
            background: url("../assets/2.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(12) {
            transform: rotateX(45deg) translateZ(-150px);
            background: url("../assets/1.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(13) {
            transform: rotateX(90deg) translateZ(-50px);
            background: url("../assets/1.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(14) {
            transform: rotateX(90deg) translateZ(50px);
            background: url("../assets/2.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(15) {
            transform: rotateY(90deg) translateZ(50px);
            background: url("../assets/3.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(16) {
            transform: rotateY(90deg) translateZ(-50px);
            background: url("../assets/4.jpg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(17) {
            transform: translateZ(-50px);
            background: url("../assets/5.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        .box li:nth-of-type(18) {
            transform: translateZ(50px);
            background: url("../assets/6.jpeg") no-repeat;
            background-size: 100% 100%;
        }
        
        @keyframes move {
            0% {
                transform: rotateX(-30deg) rotateY(0deg);
            }
            25% {
                transform: rotateX(-30deg) rotateY(360deg);
            }
            50% {
                transform: rotateX(-30deg) rotateY(0deg);
            }
            75% {
                transform: rotateX(-30deg) rotateY(360deg);
            }
            100% {
                transform: rotateX(-30deg) rotateY(0deg);
            }
        }
</style>